<template>
	<view>
		<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :back-top="true">
			<view class="content">
				<view class="top card" v-if="type == '2'">
					<view class="title">
						本次选择开票交易：{{invoiceCheck.length || 0}}笔
					</view>
					<view class="price">
						可开票金额：{{price || 0}}元
					</view>
				</view>
				<view class="list">
					<view 
					:class="['item card items-center justify-between',{cative:checkId == item.id}]" 
					v-for="item in dataList" :key="item.id"
					@click="handleClick(item)">
						<view class="left">
							<view class="name">
								{{item.title}}-{{item.titleType == '0' ? '个人' : '单位'}}
							</view>
							<view class="ads" v-if="item.address">
								{{item.address}}
							</view>
							<view class="num" v-if="item.num">
								{{item.num}}
							</view>
						</view>
						<view class="right items-center" @click="handleEdit(item)">
							<image class="icon" src="../../static/img/edit.png" mode=""></image>
							<view class="text">
								编辑
							</view>
						</view>
					</view>
				</view>
			</view>
		</s-pull-scroll>
		<view class="foot">
			<view class="btn" @click="handleClickBtn" v-if="type == '2'">
				提交
			</view>
			<view class="btn btn-1" v-else @click="navTo('./history')">
				开票历史
			</view>
			<view class="btn margin-top" @click="navTo('./add-edit?title=添加发票抬头&type=1')">
				添加发票抬头
			</view>
		</view>
		<mix-loading v-if="isLoading"></mix-loading>
	</view>
</template>

<script>
	import throttle from "@/uview-ui/libs/function/throttle.js"
	export default {
		data() {
			return {
				type:'',
				dataList:[],
				invoiceCheck:[],
				price:0,
				electricCharge:0,
				serviceCharge:0,
				checkId:''
			};
		},
		onLoad(e) {
			if(e.type) this.type = e.type
			this.invoiceCheck = getApp().globalData.invoiceCheck
			this.invoiceCheck.forEach(el=>{
				this.electricCharge += Number(el.electricCharge)
				this.serviceCharge += Number(el.serviceCharge)
			})
			this.price = this.electricCharge + this.serviceCharge
			this.refresh();
		},
		methods:{
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			handleEdit(item){
				getApp().globalData.invoiceInfo = item
				this.navTo('./add-edit?title=修改发票抬头&type=2')
			},
			handleClick(item){
				if(this.type == '2'){
					this.checkId = item.id
				}
			},
			handleClickBtn(){
				throttle(()=>{
					this.handleSubmit()
				},5000)
			},
			async loadData(pullScroll) {
				const data = {
					uid: uni.getStorageSync('uid'),
					pageNo: pullScroll.page,
					pageSize: '10'
				};
				if (pullScroll.page == 1) this.dataList = [];
				const res = await this.$request('user/invoice-list', data, { showLoading: true });
				if (res.result == 0) {
					this.dataList = this.dataList.concat(res.data.list);
					pullScroll.endByPage(Math.ceil(res.data.count / 10), res.data.list);
				} else {
					this.$util.msg(res.resultNote);
				}
			},
			async handleSubmit(){
				if(!this.checkId) return this.$util.msg('请选择发票抬头')
				var recordIds = this.invoiceCheck.map(el=>el.id).join(',')
				let data = {
					recordIds,
					electricCharge:this.electricCharge,
					serviceCharge:this.serviceCharge,
					uid:uni.getStorageSync('uid'),
					id:this.checkId
				}
				let res = await this.$request('user/create-invoice',data,{ showLoading: true })
				if(res.result == '0'){
					this.navTo('./submit')
				}else{
					this.$util.msg(res.resultNote);
				}
			}
		},
	}
</script>

<style lang="scss" scoped> 
	.content{
		padding: 20rpx;
		.card{
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
		}
		.top{
			text-align: center;
			.title{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #666666;
			}
			.price{
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FD4E3C;
				margin-top: 10rpx;
			}
		}
		.list{
			.item{
				padding: 20rpx 50rpx;
				.left{
					width: 70%;
					.name{
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #222222;
						line-height: 60rpx;
					}
					.ads,.num{
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
					}
					.num{
						margin-top: 10rpx;
					}
				}
				.right{
					.icon{
						width: 26rpx;
						height: 26rpx;
					}
					.text{
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #446CB2;
						margin-left: 20rpx;
					}
				}
			}
			.cative{
				border: 1rpx solid $uni-color-bg;
			}
		}
	}
	.foot{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		padding-bottom: 30rpx;
		z-index: 9999;
		.btn{
			width: 640rpx;
			height: 110rpx;
			background: $uni-color-bg;
			border-radius: 55rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #fff;
			line-height: 110rpx;
			text-align: center;
			margin: 0 auto;
		}
		.margin-top{
			margin-top: 20rpx;
		}
		.btn-1{
			border: 1rpx solid $uni-color-bg;
			background: #fff;
			color: $uni-color-bg;
		}
	}
</style>
